<template>
    <div class="detail-page">
        <el-page-header @back="goBack" class="detail-page-header">
            <template #content>
                    <!-- 显示项目名称 -->
                    <span class="text-large font-600 mr-3"> {{ '文章详情' }} </span>
            </template>
            <!-- 如果需要，可以在 PageHeader 右侧添加额外内容或操作按钮 -->
        </el-page-header>
        <el-divider />
        <el-main class="detail-page-main">
            <div class="detail-page-main-title">{{ detailInfo.title }}</div>
            <div class="detail-page-main-date">{{ detailInfo.create_time }}</div>
            <el-divider />
            <div v-html="detailInfo.content" class="detail-page-main-content"></div>
        </el-main>
    </div>
</template>
<script lang="ts" setup>

    import { defineEmits, ref, onMounted, defineProps } from 'vue'
    import { useRouter } from 'vue-router'
    const router = useRouter()
    import { articleCateDetail } from '@/api/article'

    const props = defineProps({
        detailId: {
            type: String || Number,
            default: ''
        }
    })
    const detailInfo = ref({})
    const emit = defineEmits<{
    (e: 'back-to-list'): void;
    }>();
    const goBack = () => {
        emit('back-to-list');
    }

    const getArticleCateDetail = async () => {
        const res = await articleCateDetail({
            id: props.detailId
        })
        detailInfo.value = res
        console.log(res)
    }
    onMounted(() => {
        getArticleCateDetail()
    })
</script>
<style scoped>
    .detail-page{
        width: 100%;
        background-color: #ffffff;
        padding: 20px;
        box-sizing: border-box;
    }
    .detail-page-main{
        
    }
    .detail-page-main-title{
        font-size: 20px;
        font-weight: 600;
        text-align: center;
    }
    .detail-page-main-date{
        font-size: 16px;
        margin-top: 10px;
        text-align: center;
    }
    .detail-page-main-content{
        text-indent: 2em;
    }
</style>